<template>
  <div id="map">
  </div>
</template>

<script setup>
import {Map, View} from 'ol'
import {OSM,XYZ,Vector} from 'ol/source';
import {Tile,Heatmap} from 'ol/layer';
import KML  from 'ol/format/KML';
import {onMounted} from 'vue';

onMounted(() => {
  const vector = new Heatmap({
    source: new Vector({
      url: 'http://localhost:5173/data/heatMap.kml',
      format: new KML({
        extractStyles: false
      }),
      wrapX:false,
      //热点半径
      radius: 15,
      //模糊尺寸,以像素为单位
      blur: 15
    })
  })
  vector.getSource().on('addfeature',event =>{
    const name = event.feature.get('name');
    const magnitude = parseFloat(name.substr(2));

    event.feature.set('weight',magnitude);
  })
console.log('出发')
  const map = new Map({
    target: 'map',//指定挂载dom，注意必须是id
    layers: [
      new Tile({
        title:"天地图路网",
        crossOrigin:"anonymous",
        wrapX:false,
        source: new XYZ({
          url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69',
        }),
      }),

      new Tile({
        title: "天地图文字标注",
        attributions:"天地图的属性描述",
        wrapX: false,
        source: new XYZ({
          url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69'
        }),
      }),
      vector
    ],
    //配置视图
    view: new View({
      center: [0,0], //视图中心位置
      projection: "EPSG:4326", //指定投影
      zoom: 2   //缩放到的级别
    })
  });
})
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
#left{
  width: 50%;
  height: 100%;
}
#right{
  width: 50%;
  height: 100%;
}
</style>